<template>
  <div class="login">
    <img src="../../assets/image/login/图层.png" alt="图层2" class="bgimg" />
    <img src="../../assets/image/login/组1.png" alt="bglogo" class="bglogo" />
    <div class="loginInput">
      <img src="../../assets/image/login/矩形5.png" alt="inputbg" />
      <img
        src="../../assets/image/login/矢量智能对象.png"
        alt="logo"
        class="logo"
      />
      <img
        src="../../assets/image/login/矢量智能对象(1).png"
        alt="leaves"
        class="leaves"
      />
      <img
        src="../../assets/image/login/矢量智能对象拷贝2.png"
        alt="smallLeaf"
        class="smallLeaf"
      />
      <img
        src="../../assets/image/login/矢量智能对象拷贝2.png"
        alt="smallLeaf"
        class="smallLeaf2"
      />
      <p class="tea">{{ title }}</p>
      <div v-for="item in inputList" :class="item.name" :key="item">
        <el-input
          v-model="item.v"
          :class="item.inputName"
          :placeholder="item.placeholder"
        />
        <img :src="item.imgUrl" :alt="item.name" />
      </div>
      <!-- <div class="user">
        <input type="text" class="userInput" placeholder="用户名" />
        <img
          src="../../assets/image/login/组1(1).png"
          alt="user"
          class="userbg"
        />
      </div>
      <div class="password">
        <input type="text" class="passwordInput" placeholder="密码" />
        <img
          src="../../assets/image/login/组1(2).png"
          alt="password"
          class="passwordbg"
        />
      </div>
      <div class="verification">
        <input type="text" class="verificationInput" placeholder="输入验证码" />
        <img
          src="../../assets/image/login/圆角矩形1拷贝2.png"
          alt="verification"
          class="verificationbg"
        />
      </div> -->
      <div class="code">{{ verificationCode }}</div>
      <span class="change" @click="change">换一张</span>
      <button class="loginBtn" @click="login">
        <img src="../../assets/image/login/组1(3).png" alt="login" />
      </button>
      <el-checkbox
        :checked="checked1"
        label="记住登录状态"
        size="large"
        @change="remember"
      ></el-checkbox>
      <div class="forgive">忘记密码</div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const title = ref("一杯茶后台管理系统");
    // 复用组件的数据
    const inputList = ref([
      {
        name: "user",
        inputName: "userInput",
        placeholder: "用户名",
        imgUrl: require("../../assets/image/login/组1(1).png"),
        v: localStorage.getItem("user") || "",
      },
      {
        name: "password",
        inputName: "passwordInput",
        placeholder: "密码",
        imgUrl: require("../../assets/image/login/组1(2).png"),
        v: localStorage.getItem("password") || "",
      },
      {
        name: "verification",
        inputName: "verificationInput",
        placeholder: "输入验证码",
        imgUrl: require("../../assets/image/login/圆角矩形1拷贝2.png"),
        v: "",
      },
    ]);

    // 记住密码
    const checked1 = ref(Boolean(+localStorage.getItem("check1")));
    const remember = () => {
      // console.log(localStorage.getItem("check1"));
      // console.log(Boolean(+localStorage.getItem("check1")));
      checked1.value = !checked1.value;
      console.log(checked1.value);
      if (checked1.value) {
        localStorage.setItem("user", inputList.value[0].v);
        localStorage.setItem("password", inputList.value[1].v);
        localStorage.setItem("check1", 1);
        sessionStorage.removeItem("user", inputList.value[0].v);
        sessionStorage.removeItem("password", inputList.value[1].v);
        sessionStorage.removeItem("check1", 1);
      } else {
        localStorage.removeItem("user");
        localStorage.removeItem("password");
        localStorage.removeItem("check1");
        sessionStorage.setItem("user", inputList.value[0].v);
        sessionStorage.setItem("password", inputList.value[1].v);
        sessionStorage.setItem("check1", 1);
      }
    };

    // 验证码
    const verificationCode = ref(""); // 接收随机数
    const getCode = () => {
      // 随机数函数
      const codeArr = []; // 随机数组
      for (let i = 65; i <= 90; i++) {
        codeArr.push(String.fromCharCode(i));
        codeArr.push(String.fromCharCode(i).toLowerCase());
      }
      for (let i = 48; i <= 57; i++) {
        codeArr.push(String.fromCharCode(i));
      }
      for (let i = 0; i <= 3; i++) {
        const num = parseInt(Math.random() * 62);
        verificationCode.value += codeArr[num];
      }
      return verificationCode.value;
    };
    getCode();
    const change = () => {
      // 换一张验证码
      verificationCode.value = "";
      getCode();
    };

    // 输入验证码是否相同  在点击登陆的时候进行验证
    const login = () => {
      // 判断输入账号密码
      if (inputList.value[0].v !== "" && inputList.value[1].v !== "") {
        // 判断验证码正确  去数据库比较  返回token 存入sessionStorage
        if (inputList.value[2].v === verificationCode.value) {
          // 设置flag来判断是否遍历找到账号密码
          let flag = false;
          console.log(store.state.userLogin.userList);
          const list = Object.values(store.state.userLogin.userList); // 数据
          console.log(list);
          for (let i of list) {
            console.log(i);
            if (
              i.user === inputList.value[0].v &&
              i.password === inputList.value[1].v
            ) {
              console.log("token");
              sessionStorage.setItem("token", i.token);
              flag = true;
              router.push("/index");
              return;
            }
          }
          if (flag === false) {
            open("账号和密码谁都不能错呢", "想要喝茶的话");
            localStorage.removeItem("user");
            localStorage.removeItem("password");
            localStorage.removeItem("check1");
            sessionStorage.removeItem("user");
            sessionStorage.removeItem("password");
            sessionStorage.removeItem("check1");
            inputList.value[1].v = "";
            inputList.value[0].v = "";
            inputList.value[2].v = "";
            change();
          }
        } else {
          open("验证码错误也不行   哼！", "想要喝茶的话");
          change();
          inputList.value[2].v = "";
        }
      } else {
        // 搞个提示
        open("账号密码缺一不可哦", "想要喝茶的话");
      }
    };
    // 封装提示框
    const open = (text, title) => {
      ElMessageBox.alert(text, title, {
        confirmButtonText: "OK",
        customStyle: "width:800px;height:180px;background-color:#dbe2ca",
      });
    };
    return {
      title,
      inputList,
      checked1,
      remember,
      getCode,
      change,
      login,
      open,
      verificationCode,
    };
  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  .bgimg {
    width: 100%;
    height: 100%;
  }
  .bglogo {
    width: 100%;
    height: 785px;
    margin: auto auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-46%);
  }
  .loginInput {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .logo {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
    .leaves {
      position: absolute;
      width: 195px;
      height: 155px;
      bottom: -26px;
      left: -213px;
    }
    .smallLeaf {
      position: absolute;
      bottom: -35px;
      right: 119px;
    }
    .smallLeaf2 {
      position: absolute;
      right: -169px;
      top: 259px;
    }
    .tea {
      position: absolute;
      top: 133px;
      left: 50%;
      transform: translateX(-50%);
      width: 274px;
      height: 30px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 31px;
    }
    .user {
      position: absolute;
      top: 189px;
      left: 50%;
      transform: translateX(-50%);
    }
    .password {
      position: absolute;
      top: 279px;
      left: 50%;
      transform: translateX(-50%);
    }
    .verification {
      position: absolute;
      top: 371px;
      left: 57px;
    }
    .loginBtn {
      position: absolute;
      top: 481px;
      left: 57px;
      border: none;
    }
    /deep/.el-input--default {
      position: absolute;
      top: 20px;
      left: 70px;
    }
    // /deep/.userInput,
    // /deep/.passwordInput,
    // /deep/.verificationInput,
    /deep/.el-input__inner {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 287px;
      height: 30px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5f5e5e;
      line-height: 31px;
      background-color: transparent;
      border: none;
    }
    .verificationInput {
      left: 38px;
      width: 151px;
      height: 29px;
    }
    .code {
      width: 129px;
      height: 59px;
      background-image: linear-gradient(
        45deg,
        pink,
        rgb(230, 68, 203),
        lightgreen,
        rgb(95, 95, 212),
        lightyellow,
        orange
      );
      position: absolute;
      top: 375px;
      left: 311px;
      font-size: 32px;
      text-align: center;
      line-height: 59px;
      font-weight: 800;
      word-spacing: 15px;
    }
    .change {
      position: absolute;
      top: 392px;
      left: 473px;
      width: 73px;
      height: 23px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 31px;
      cursor: pointer;
    }
    /deep/.el-checkbox {
      position: absolute;
      top: 600px;
      left: 57px;
      width: 183px;
      height: 29px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 31px;
    }
    .forgive {
      position: absolute;
      top: 603px;
      left: 424px;
      width: 121px;
      height: 29px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 31px;
      cursor: pointer;
    }
  }
}
/deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
  width: 30px;
  height: 30px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: rotate(45deg) scaleY(3) translateX(12px);
}
/deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
  font-size: 30px;
}
</style>
